<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/wings.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
    <title>谭滨瀚的个人主页</title>
</head>

<body>
    <div>
        <nav class="navbar navbar-dark bg-dark flex-md-nowrap p-0 shadow">
            <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Blogs</a>
        </nav>
    </div>
    <div class="container-fluid">
        <div class="row justify-content-center">
            <nav class="icon col-md-2  d-none d-md-block bg-light" style="min-width:0px!important;">
                <div>
                    <div class="jumbotron">
                        <img src="../img/touxiang.jpg" class="rounded-circle d-block mx-auto" style="width:50px;" />
                        <p class="text-center text-info"><strong>谭滨瀚的个人主页</strong></p>
                        <p class="text-center font-weight-light">Compiled and Designed by Wings</p>
                    </div>
                    <div class="col-md-auto">
                        <ul class="nav flex-column ">
                            <li class="nav-item scale-1-1">
                                <a class="nav-link text-center" href="../index.html">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-home">
                                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                    </svg>
                                    <span class="align-middle">Pages</span>
                                </a>
                            </li>
                            <li class="nav-item scale-1-1">
                                <a class="nav-link text-center" href="Blogs.html">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-file">
                                        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                        <polyline points="13 2 13 9 20 9"></polyline>
                                    </svg>
                                    Blogs
                                </a>
                            </li>
                            <li class="nav-item scale-1-1">
                                <a class="nav-link text-center" href="Friend.html">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-users">
                                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="9" cy="7" r="4"></circle>
                                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                    </svg>
                                    Friends
                                </a>
                            </li>
                            <li class="nav-item scale-1-1">
                                <a class="nav-link text-center" href="Contact.html">
                                    <svg width="24" height="24" viewbox="0 0 18 18" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                        class="si-glyph si-glyph-phone-number">
                                        <!-- Generator: Sketch 3.0.3 (7891) - http://www.bohemiancoding.com/sketch -->
                                        <title>129</title>

                                        <defs></defs>
                                        <g stroke="currentColor" stroke-width="1" stroke-linecap="round"
                                            stroke-linejoin="round" fill="none" fill-rule="evenodd">
                                            <g>
                                                <g>
                                                    <path
                                                        d="M15.924,3.779 C15.924,-0.037 9.787,0.09 7.637,0.09 C5.485,0.09 0.038,0.136 0.038,3.953 L3.947,3.953 C3.947,3.926 3.951,2.759 3.951,2.996 C3.951,2.558 4.43,1.969 5.504,1.969 L10.517,1.969 C11.563,1.969 12.054,2.558 12.054,2.996 L12.054,2.996 C12.054,3.15 12.062,3.923 12.062,3.953 L15.922,3.953 C15.922,3.94 15.924,3.791 15.924,3.779 L15.924,3.779 Z"
                                                        class="si-glyph-fill"></path>
                                                    <path
                                                        d="M4.987,9.338 C4.987,9.679 4.701,9.955 4.349,9.955 L3.652,9.955 C3.299,9.955 3.013,9.679 3.013,9.338 L3.013,8.662 C3.013,8.321 3.299,8.045 3.652,8.045 L4.349,8.045 C4.701,8.045 4.987,8.321 4.987,8.662 L4.987,9.338 L4.987,9.338 Z"
                                                        class="si-glyph-fill"></path>
                                                    <path
                                                        d="M12.975,9.345 C12.975,9.698 12.69,9.983 12.336,9.983 L11.64,9.983 C11.287,9.983 11.002,9.698 11.002,9.345 L11.002,8.648 C11.002,8.295 11.287,8.01 11.64,8.01 L12.336,8.01 C12.69,8.01 12.975,8.295 12.975,8.648 L12.975,9.345 L12.975,9.345 Z"
                                                        class="si-glyph-fill"></path>
                                                    <path
                                                        d="M8.986,9.349 C8.986,9.702 8.701,9.987 8.348,9.987 L7.65,9.987 C7.298,9.987 7.013,9.702 7.013,9.349 L7.013,8.652 C7.013,8.299 7.298,8.014 7.65,8.014 L8.348,8.014 C8.701,8.014 8.986,8.299 8.986,8.652 L8.986,9.349 L8.986,9.349 Z"
                                                        class="si-glyph-fill"></path>
                                                    <path
                                                        d="M4.962,12.336 C4.962,12.689 4.681,12.974 4.334,12.974 L3.648,12.974 C3.3,12.974 3.019,12.689 3.019,12.336 L3.019,11.639 C3.019,11.285 3.3,11 3.648,11 L4.334,11 C4.681,11 4.962,11.285 4.962,11.639 L4.962,12.336 L4.962,12.336 Z"
                                                        class="si-glyph-fill"></path>
                                                    <path
                                                        d="M12.943,12.346 C12.943,12.694 12.668,12.974 12.326,12.974 L11.65,12.974 C11.308,12.974 11.033,12.694 11.033,12.346 L11.033,11.66 C11.033,11.311 11.308,11.031 11.65,11.031 L12.326,11.031 C12.668,11.031 12.943,11.311 12.943,11.66 L12.943,12.346 L12.943,12.346 Z"
                                                        class="si-glyph-fill"></path>
                                                    <path
                                                        d="M8.982,12.346 C8.982,12.694 8.698,12.974 8.345,12.974 L7.648,12.974 C7.295,12.974 7.01,12.694 7.01,12.346 L7.01,11.66 C7.01,11.311 7.295,11.031 7.648,11.031 L8.345,11.031 C8.698,11.031 8.982,11.311 8.982,11.66 L8.982,12.346 L8.982,12.346 Z"
                                                        class="si-glyph-fill"></path>
                                                    <path
                                                        d="M4.993,15.347 C4.993,15.689 4.707,15.965 4.355,15.965 L3.658,15.965 C3.305,15.965 3.019,15.689 3.019,15.347 L3.019,14.671 C3.019,14.33 3.305,14.054 3.658,14.054 L4.355,14.054 C4.707,14.054 4.993,14.33 4.993,14.671 L4.993,15.347 L4.993,15.347 Z"
                                                        class="si-glyph-fill"></path>
                                                    <path
                                                        d="M12.975,15.357 C12.975,15.711 12.69,15.996 12.336,15.996 L11.64,15.996 C11.287,15.996 11.002,15.711 11.002,15.357 L11.002,14.66 C11.002,14.307 11.287,14.022 11.64,14.022 L12.336,14.022 C12.69,14.022 12.975,14.307 12.975,14.66 L12.975,15.357 L12.975,15.357 Z"
                                                        class="si-glyph-fill"></path>
                                                    <path
                                                        d="M8.982,15.357 C8.982,15.711 8.703,15.996 8.355,15.996 L7.669,15.996 C7.321,15.996 7.042,15.711 7.042,15.357 L7.042,14.66 C7.042,14.307 7.321,14.022 7.669,14.022 L8.355,14.022 C8.703,14.022 8.982,14.307 8.982,14.66 L8.982,15.357 L8.982,15.357 Z"
                                                        class="si-glyph-fill"></path>
                                                </g>
                                                <path
                                                    d="M0.992,5.973 L3.039,5.973 C3.039,5.973 3.746,6.201 3.926,5 L0.067,5 C0.234,6.113 0.992,5.973 0.992,5.973 L0.992,5.973 Z"
                                                    class="si-glyph-fill"></path>
                                                <path
                                                    d="M12.115,5 C12.324,6.053 13.078,5.973 13.078,5.973 L14.969,5.973 C14.969,5.973 15.727,5.984 15.912,5 L12.115,5 L12.115,5 Z"
                                                    class="si-glyph-fill"></path>
                                            </g>
                                        </g>
                                    </svg>
                                    Contact
                                </a>
                            </li>
                            <li class="nav-item scale-1-1">
                                <a class="nav-link text-center" href="Calendar.html">

                                    <svg width="24" height="24" viewbox="0 0 18 18" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                        class="si-glyph si-glyph-calendar-1">
                                        <!-- Generator: Sketch 3.0.3 (7891) - http://www.bohemiancoding.com/sketch -->
                                        <title>1115</title>

                                        <defs></defs>
                                        <g stroke="currentColor" stroke-width="1" stroke-linecap="round"
                                            stroke-linejoin="round" fill="none" fill-rule="evenodd">
                                            <g>
                                                <path
                                                    d="M13,0.031 L13,1 L11,1 L11,0.031 L5,0.031 L5,1 L3,1 L3,0.031 L0,0.031 L0,16 L16,16 L16,0.031 L13,0.031 L13,0.031 Z M14.029,14.008 L1.955,14.008 L1.955,4.938 L14.029,4.938 L14.029,14.008 L14.029,14.008 Z"
                                                    class="si-glyph-fill"></path>
                                                <path
                                                    d="M6.027,7.957 L5.047,7.957 L5.047,7.016 L6.949,7.016 L6.949,11.954 L6.027,11.954 L6.027,7.957 L6.027,7.957 Z"
                                                    class="si-glyph-fill"></path>
                                                <path
                                                    d="M10.027,7.957 L9,7.957 L9,7.016 L10.953,7.016 L10.953,11.954 L10.027,11.954 L10.027,7.957 L10.027,7.957 Z"
                                                    class="si-glyph-fill"></path>
                                            </g>
                                        </g>
                                    </svg>
                                    Calendar
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
                <div class="jumbotron">
                    <h1 class="text-center">程序员必备的开发常识</h1>
                    <p class="para">保持良好的编码习惯才能使代码更高质量；杜绝一次性编程！</p>
                </div>
                <hr>
                <h2>代码规范</h2>
                <blockquote class="text-muted">代码规范是编码的重中之重，保持代码规范的习惯能够更便于开发者找到问题所在；不仅仅是缩进，还有大小写，命名规范等</blockquote>
                <ul>
                    <li>保持代码缩进能更便于寻找到需要修改的代码；</li>
                    <li>大小写问题在部分语言中是敏感的，因此需要时刻注意大小写，例如HTML中要求小写；</li>
                    <li>变量命名绝对禁止中文命名，字符串命名，数字开头；</li>
                    <li>变量命名允许以$符号开头（部分语言不允许）；</li>
                </ul>
                <hr>
                <h2>模块式开发</h2>
                <blockquote class="text-muted">
                    为什么要说这个点呢？如果说把积木都做出来了那么是不是只需要去搭积木就可以了呢？这种开发方法更高效便捷，如果你想要引用一个新的技术点，那么在原有基础上写是会混乱的，建议写个实例测试真正能跑起来了再移植过去；
                </blockquote>
                <ul>
                    <li>学习模块式开发应该掌握，HTML，CSS，JavaScript，能够灵活运用div标签；</li>
                    <li>搭建积木通过JavaScript把数据输出会大大减少程序代码量，提升整体性能；</li>
                    <li>学会在纸上打草稿，写实例测试大大减少代码报错的可能性；</li>
                </ul>
                <hr>
                <h2>一行一测</h2>
                <blockquote class="text-muted">我所说的一行一测并不是真正的一行一测，而是实现一个功能后能够保证它能够运行；</blockquote>
                <ul>
                    <li>为什么要一行一测呢？</li>
                    <li>如果说一直写，写到后面必须保持思路清晰才能减少代码报错的可能性，因为写过多的代码往往容易出很多的问题；</li>
                    <li>我认为这个习惯应该是程序员必备的；</li>
                </ul>
                <hr>
                <h2>一测一行</h2>
                <blockquote class="text-muted">少量的测试，高质量的成果是开发者所追求的；</blockquote>
                <ul>
                    <li>测试成功实现了某个功能给开发者带来的往往是喜悦的心情</li>
                    <li>很好的起到了放松的作用，还能清晰的想好下一步该写些什么；</li>
                    <li>如果说一次测试太多的程序往往不能发现一些很细微的问题；</li>
                    <li>在某些时刻这就能够给开发者带来很大的损失；</li>
                </ul>
                <hr>
                <h2>代码功能注释</h2>
                <blockquote class="text-muted">养成写注释的习惯才能够成为一个好的程序员，写注释能够更好地了解到实现了什么功能；</blockquote>
                <ul>
                    <li>为什么不是一行一注释呢？</li>
                    <li>因为往往通过大量的敲击代码就能够了解某个代码实现了什么功能；</li>
                    <li>代码是灵活运用的，到底实现了什么功能，调用了什么方法还是应该去写的；</li>
                </ul>
            </main>
        </div>

    </div>
    <script src="../js/jquery-3.3.1.slim.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.js"></script>

</body>

</html>